import React from 'react'
import {useSelector} from '../../redux/hooks'
import {useDispatch} from "react-redux";
import {loadMore} from "../../redux/slices";
import {Link} from "react-router-dom";

export const List: React.FC = () => {
  const articles = useSelector((state) => state.article)
  const dispatch = useDispatch()
  const getMore = () => {
    dispatch(loadMore())
  }
  return (
    <>
      <div className="articleWrapper">
        {articles.map((article) => {
          return (
            <div className="articleItem" key={article.id}>
              <div className="left-panel">
                <Link className="title" to={`/detail/${article.id}`}>{article.title}</Link>
                <p className="desc">{article.desc}</p>
              </div>
              <img
                src={article.imgUrl}
                alt={article.title}
                className="right-img"
              />
            </div>
          )
        })}
      </div>
      <div className="button" onClick={getMore}>加载更多</div>
    </>
  )
}
